<template>
  <div class="home" style="width: 100%;height: 100%;">
    <div class="tool">
      <div class="button-list">
        <el-tooltip placement="top">
          <template slot="content">主动降级，去除shadow+proxy</template>
          <el-switch
            class="switch button-gap"
            :disabled="disable"
            active-children="降级开"
            inactive-children="降级关"
            v-model="degrade"
          />
        </el-tooltip>
        <el-tooltip placement="top">
          <template slot="content">预加载+预执行</template>
          <el-switch
            class="switch button-gap"
            active-children="预加载开"
            inactive-children="预加载关"
            v-model="preload"
          />
        </el-tooltip>
      </div>
    </div>

    <div class="detail-content">
      wujie 牛逼 plus
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      preload: window.localStorage.getItem("preload") !== "false",
      degrade: window.localStorage.getItem("degrade") === "true" || !window.Proxy || !window.CustomElementRegistry,
      disable: !window.Proxy || !window.CustomElementRegistry,
    };
  },
  watch: {
    preload(val) {
      window.localStorage.setItem("preload", val);
      setTimeout(() => window.location.reload(), 1000);
    },
    degrade(val) {
      window.localStorage.setItem("degrade", val);
      setTimeout(() => window.location.reload(), 1000);
    },
  },
};
</script>

<style scoped>
.button-gap {
  margin-bottom: 10px;
}

.button-list {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.tool {
  margin: 30px 20px 30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.switch {
  margin-left: 15px;
  padding: 5px;
  height: 40px;
}

.detail-content {
  width: 100%;
  height: calc(100% - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.home {
  font-size: 20px;
}

span.switch {
  margin-left: 0;
  padding: 0;
}
</style>
